---
title: "Drop Zone"
description: The Drop Zone component allows users to drag and drop files or select them manually for a seamless and intuitive upload experience.
order: 1
published: true
references: ["https://react-spectrum.adobe.com/react-aria/DropZone.html#props"]
---

## Basic

DropZone provides support for mouse, keyboard, and touch interactions. Simply connect the `onDrop` prop to handle all the drop actions. Additionally, you’ll receive real-time updates through `onDropEnter`, `onDropMove`, and `onDropExit` events as users interact with the drop zone.

<How toUse="drag-and-drop/drag/drop-zone-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/drop-zone
```


## Manual installation
```bash
npm i react-aria-components
```

<SourceCode toShow='drop-zone'/>

## Anatomy
```
import { DropZone } from "@/components/ui/drop-zone"
import { Label } from "@/components/ui/field"
```

```
<DropZone>
  <Label>Toss your stuff here</Label>
</DropZone>
```

## Using FileTrigger
The `FileTrigger` component can be used to select files from the file system, making it an excellent tool for managing files that have been dragged and dropped into the browser.

<How toUse="drag-and-drop/drag/drop-zone-and-file-trigger-demo" />
